<template>
  <div class="chart-container">
    <div class="chart-title">重点目标单位督查全景舱</div>
    <div class="chart-search">
      <el-cascader
        v-model="params.region"
        placeholder="请选择所在区域"
        :options="options"
        filterable
        clearable
        @change="handlerregion"
        :props="areaprops"
        popper-class="confirmadd_el-cascader-dropdown"
        style="width: 300px"
      />
      <el-select
        v-model="params.typeId"
        placeholder="请选择单位类型"
        clearable
        class="search-item"
        popper-class="confirmadd_el-select-dropdown"
      >
        <el-option
          v-for="dict in unittypeList"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        />
      </el-select>
      <el-select
        v-model="params.levelId"
        placeholder="请选择单位级别"
        clearable
        class="search-item"
        popper-class="confirmadd_el-select-dropdown"
      >
        <el-option
          v-for="dict in unitlevelList"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        />
      </el-select>
      <el-select
        v-model="params.industryId"
        placeholder="请选择所属行业"
        clearable
        class="search-item"
        popper-class="confirmadd_el-select-dropdown"
      >
        <el-option
          v-for="dict in supervisorList"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        />
      </el-select>

      <el-button @click="getdataList" class="search-box-btn"
        ><img src="@/assets/images/search.png" alt="" /> 搜索</el-button
      >
      <el-button @click="reset(1)" class="search-box-btn refresh"
        ><img src="@/assets/images/wreset.png" alt="" />
        <span> 重置 </span>
      </el-button>
    </div>
    <div class="chart-content">
      <div class="content-left">
        <div class="card-item1">
          <div class="item-title">单位类型</div>
          <dataStatistics ref="statistics" />
        </div>
        <div class="card-item1">
          <div class="item-title">单位等级</div>
          <ControlArea ref="controlArea" />
        </div>
        <div class="card-item2">
          <div class="item-title">区域分布</div>
          <Regionaldistribution ref="regionaldistribution" />
        </div>
      </div>
      <div class="content-middle"></div>
      <div class="content-right">
        <div class="card-item1">
          <div class="item-title">单位类型</div>
          <Inspectionrecords ref="inspectionrecords" />
        </div>
        <div class="card-item1"></div>
        <div class="card-item2"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getDictsApi, getAreaList } from "@/api/dict";
import DataStatistics from "./dataStatistics.vue";
import ControlArea from "./controlArea.vue";
import Regionaldistribution from "./regionaldistribution.vue";
import Inspectionrecords from "./Inspectionrecords.vue";

// 搜索参数
let params = reactive({
  pageNum: 1,
  pageSize: 20,
  region: [],
  provinceId: "",
  cityId: "",
  zoneId: "",
  streetId: "",
});

//行政区划数据
let options = ref([]);
// 单位类型下拉
const unittypeList = ref([]);
// 单位级别下拉
const unitlevelList = ref([]);
// 所属行业下拉
const supervisorList = ref([]);

const areaprops = {
  lazy: true,
  checkStrictly: true,
  lazyLoad(node, resolve) {
    console.log("node", node);
    const { level } = node;
    let datas = [];
    setTimeout(() => {
      let code = 1;
      if (level != 0) {
        code = node.data.value;
      }
      getAreaList({ pid: code }).then((response) => {
        if (response.data && response.data.length) {
          datas = response.data.map((item, i) => ({
            value: item.value,
            label: item.label,
            leaf: level >= 3,
            // disabled: true, // 这里可以设置为 true 来禁用这个选项
          }));
        } else {
          datas = [];
        }
        resolve(datas);
      });
    }, 200);
  },
};

/**
 * @description: 联级处理省市区操作
 * @param {String} type 类型
 */
const handlerregion = (value) => {
  if (value) {
    switch (value.length) {
      case 1:
        params.provinceId = value[0];
        break;
      case 2:
        params.provinceId = value[0];
        params.cityId = value[1];
        break;
      case 3:
        params.provinceId = value[0];
        params.cityId = value[1];
        params.zoneId = value[2];
        break;
      case 4:
        params.provinceId = value[0];
        params.cityId = value[1];
        params.zoneId = value[2];
        params.streetId = value[3];
        break;

      default:
        break;
    }
  } else {
    params.region = [];
    params.provinceId = null;
    params.cityId = null;
    params.zoneId = null;
    params.streetId = null;
  }
};

/**
 * @description: 筛选数据
 */
const getdataList = () => {};

/**
 * @description: 重置
 */
const reset = (type) => {
  Object.assign(params, {
    pageNum: 1,
    pageSize: 20,
    region: [],
    provinceId: "",
    cityId: "",
    zoneId: "",
    streetId: "",
  });
  // getdataList();
};

/**
 * @description: 获取字典
 */
async function getDicts() {
  await getDictsApi("institution_type").then((res) => {
    //单位类型下拉
    if (res.code === 200) {
      unittypeList.value = res.data;
    }
  });
  await getDictsApi("institution_industry_type").then((res) => {
    //行业主管下拉
    if (res.code === 200) {
      supervisorList.value = res.data;
    }
  });
  await getDictsApi("fkwz_institution_level_type").then((res) => {
    //单位级别下拉
    if (res.code === 200) {
      unitlevelList.value = res.data;
    }
  });
}

//处置数据统计表格自适应
let statistics = ref(null);
const Statisticsresize = () => {
  // Statistics.value.resize();
};

/**
 * @description: 全屏时适配
 */

const onWindowResize = () => {
  Statisticsresize();
};

onMounted(() => {
  getDicts();
  window.addEventListener("resize", onWindowResize, false);
  onWindowResize();
});
</script>

<style scoped lang="scss">
.chart-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url("@/assets/images/databac.png") no-repeat;
  background-color: #001427;
  background-size: 100% 100%;
  padding: 0 40px;
  .chart-title {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 30%;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 800;
    font-size: 28px;
    color: #ffffff;
    background: linear-gradient(
      0deg,
      #96b4d0 33.837890625%,
      #ffffff 61.6943359375%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-top: 10px;
  }
  .chart-search {
    display: flex;
    gap: 20px;
    position: absolute;
    top: 8vh;
    width: calc(100% - 80px);
    .search-box-btn {
      color: #fff;
      background: #005c83;
      border: 1px solid #3ab4ff;
      border-radius: 2px;
      img {
        margin-right: 8px;
      }
    }
    .refresh {
      background: #b59900;
      border-color: #ffe348;
    }

    :deep(.el-input__wrapper) {
      border-radius: 5px;
      border: 1px solid #2c8fc9;
      background: #02101e;
      box-shadow: unset;
    }
    :deep(.el-input__inner) {
      color: #fff;
    }
  }
  .chart-content {
    position: absolute;
    top: 13vh;
    display: flex;
    width: calc(100% - 80px);
    height: 83.5vh;
    .content-left {
      width: 24%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .card-item1 {
        flex: 7;
        margin-bottom: 20px;
        background: url("@/assets/images/border1.png") no-repeat;
        background-size: 100% 100%;
      }
      .card-item2 {
        flex: 10;
        background: url("@/assets/images/border2.png") no-repeat;
        background-size: 100% 100%;
      }
      .item-title {
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        font-weight: 800;
        font-size: 16px;
        color: #ffffff;
        background: linear-gradient(
          0deg,
          #96b4d0 33.837890625%,
          #ffffff 61.6943359375%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .content-middle {
      width: 62%;
      margin: 0 20px;
    }
    .content-right {
      width: 24%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .card-item1 {
        flex: 7;
        margin-bottom: 20px;
        background: url("@/assets/images/border1.png") no-repeat;
        background-size: 100% 100%;
      }
      .card-item2 {
        flex: 10;
        background-color: #00f3fd;
      }
      .item-title {
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        font-weight: 800;
        font-size: 16px;
        color: #ffffff;
        background: linear-gradient(
          0deg,
          #96b4d0 33.837890625%,
          #ffffff 61.6943359375%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>

<style lang="scss">
.confirmadd_el-select-dropdown {
  border: transparent !important;
  background-color: rgba(35, 62, 92, 1);
  color: #fff;
  /* // width: 50% !important;
    // min-width: 0px !important; */

  .el-select-dropdown__item {
    font-size: 14px;
    cursor: pointer;
    color: #fff;
  }
  .el-select .el-input__wrapper,
  .el-input__wrapper {
    background-color: rgba(35, 62, 92, 1);
    color: #fff;
    border: 1px solid #00f3fd;
    box-shadow: none;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #51e3f3;
  }
  .el-select-dropdown {
    border: none;
  }
  /* // option选项 上面的箭头 */
  .el-popper .popper__arrow::after {
    border-bottom-color: rgb(0, 142, 188);
  }
}
/* // option选项 上面的箭头 */
.confirmadd_el-select-dropdown[data-popper-placement^="bottom"]
  .el-popper__arrow::before {
  border-bottom-color: rgb(35, 62, 92) !important;
  border-right-color: rgb(35, 62, 92) !important;
  border-top-color: rgb(35, 62, 92) !important;
  border-left-color: rgb(35, 62, 92) !important;
  background: rgb(35, 62, 92);
}
.confirmadd_el-cascader-dropdown {
  background-color: #233e5c !important;
  border: unset;
  .el-cascader-menu:last-child .el-cascader-node,
  .el-cascader-node.is-selectable.in-active-path {
    color: #fff;
  }
  .el-cascader-node:not(.is-disabled):hover {
    background-color: #51e3f3;
  }
  .el-cascader-node:not(.is-disabled) {
    /* color: #001427; */
  }
  .el-popper__arrow::before {
    background: #233e5c !important;
  }
  .el-cascader-node:not(.is-disabled):focus {
    background-color: #51e3f3;
  }
}
</style>
